<template>
<div>
    <el-row style="margin: 18px 0px 0px 25px ">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/blog' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>博客管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-link href="/admin/content/editorBlog" :underline="false" target="_blank" class="add-link">
      <el-button type="success">写博客</el-button>
    </el-link>
    <el-card style="margin: -1px 2%;width: 95%">
      <el-table
    :data="blogs"
    :height="tableHeight"
    style="width: 100%">
    <el-table-column
      label="创作日期"
      width="300">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.createTime | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="题目"
      width="300">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>题目: {{ scope.row.title }}</p>
          <p>浏览: {{ scope.row.views }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.title }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column
      label="更新日期"
      width="350">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.updateTime | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleView(scope.row.id)">查看</el-button>
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>

      </template>
    </el-table-column>

  </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
 export default {
   name: 'BlogManager',
   data () {
     return {
        blogs: [],
        pageSize: 6,
        total: 0
     }
   },
   props: [],
   components: {
   },
   created () {},
   mounted () {this.loadBlogs()},
   computed: {
      tableHeight () {
        return 364
      }
    },
   methods: {
     loadBlogs () {
                var _this = this
                this.$axios.get('/blog/' + this.pageSize + '/1').then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.blogs = resp.data.data.records
                    _this.total = resp.data.data.total
                  }
                })
              },
              handleCurrentChange (page) {
                var _this = this
                this.$axios.get('/blog/' + this.pageSize + '/' + page).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.blogs = resp.data.data.records
                    _this.total = resp.data.data.total
                    console.log(resp.data.data.records.length)
                  }
                })
              },
              dateFormat(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if (data ==='') {
                    return ''
                }else {
                    let dt = new Date(data)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
                }
              },
              handleDelete(id) {
                this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    this.$axios
                      .delete('/user/blog/delete/' + id).then(resp => {
                      if (resp && resp.data.code === 200) {
                        this.loadBlogs()
                      }
                    })
                  }
                ).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                })
              },
              handleEdit(blogs) {
                this.$router.push(
                  {
                    name: 'EditorBlog',
                    params: {
                      blogs: blogs
                    }
                  }
                )
              },
              handleView(id) {
                let articleUrl = this.$router.resolve(
                  {
                    path: '../../blog/Details',
                    query: {
                      id: id
                    }
                  }
                )
                window.open(articleUrl.href, '_blank')
              },

   }
 }
</script>

<style lang="css" scoped>
.add-link {
    margin: 18px 0 15px 25px;
    float: left;
  }
</style>
